import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Spin } from 'antd';
import 'moment/locale/zh-cn';
import { ModalC, TableC, SecondHeaderC } from '../../../comps';
import style from './index.less';

@connect(({ ratingmonitoringM, globalM, loading, userM: user }) => ({
  ratingmonitoringM,
  globalM,
  loading,
  user,
}))
@Form.create()
export default class HistoryModalC extends PureComponent {
  state = {
    columnsHold: undefined, //持仓表头
    dataSourceHold: undefined, //持仓数据源
    columnsHistory: undefined, //历史评级表头
    dataSourceHistory: undefined, //历史评级数据源
    basicInfo: {}, //基本信息
  };

  componentDidMount() {
    this.queryInfo(); //查询当前数据
    console.log(this.props.type);
    if (this.props.type != 2) this.queryHold(); //查询持仓
  }
  componentWillUnmount() {}

  showValue = (value, arr) => {
    if (!arr.length) return value;
    let text = '';
    arr.forEach((item) => {
      if (item.code === value) text = item.value;
    });
    return text;
  };

  //查询历史持仓和评级
  queryInfo = () => {
    this.setState(
      {
        columnsHold: undefined,
        dataSourceHold: undefined,
        columnsHistory: undefined,
        dataSourceHistory: undefined,
        basicInfo: {},
      },
      () => {
        this.queryHistory(); //查询历史
      },
    );
  };
  //查询历史
  queryHistory = () => {
    const { dispatch, type, modalData = {} } = this.props;
    //不同类型对应不同的url
    var url = type == '0' ? 'getCompanyHistory' : type == '1' ? 'getBondHistory' : 'getImplicationHistory';
    var apiParams = type == '0' ? { comCode: modalData.comCode } : { tradingCode: modalData.tradingCode || modalData.tradeCode };
    dispatch({
      type: 'ratingmonitoringM/queryHistory',
      payload: {
        url,
        ...apiParams,
      },
      callback: (msg, data, basicInfo) => {
        if (msg == 'success') {
          data.dataSource.history && data.dataSource.history.map((item, index) => (item.key = index));
          data.dataSource.curveList && data.dataSource.curveList.map((item, index) => (item.key = index));
          this.setState({
            columnsHistory: data.columns || [],
            dataSourceHistory: type != 2 ? data.dataSource.history || [] : data.dataSource.curveList || [],
            basicInfo: basicInfo || {},
          });
        } else {
          this.setState({
            columnsHistory: [],
            dataSourceHistory: [],
            basicInfo: {},
          });
        }
      },
    });
  };

  //查询持仓
  queryHold = () => {
    const {
      dispatch,
      type,
      user: {
        currentUser: { userId },
      },
      modalData = {},
    } = this.props;
    //不同类型对应不同的url
    var url = type == '0' ? 'getCompanyHold' : type == '1' ? 'getBondHold' : 'getImplicationHold';
    var apiParams = type == '0' ? { comCode: modalData.comCode, userId } : { tradingCode: modalData.tradingCode || modalData.tradeCode, userId };
    dispatch({
      type: 'ratingmonitoringM/queryHold',
      payload: {
        url,
        ...apiParams,
      },
      callback: (msg, data) => {
        if (msg == 'success') {
          data.dataSource.map((item, index) => (item.key = index));
          this.setState({
            columnsHold: data.columns || [],
            dataSourceHold: data.dataSource || [],
          });
        } else {
          this.setState({
            columnsHold: [],
            dataSourceHold: [],
          });
        }
      },
    });
  };

  //key value转换
  showValue = (arr, value) => {
    if (!arr.length) return '--';
    let text = value;
    arr.forEach((item) => {
      if (item.code === value) text = item.value;
    });
    return text || '--';
  };

  //展示表格
  showTableHistory = () => {
    const {
      globalM: {
        dataDictionary: { ENDOFPERIODRATEPROSPECT = [] },
      },
    } = this.props;
    const { columnsHistory, dataSourceHistory } = this.state;
    columnsHistory &&
      columnsHistory.map((item) => {
        if (item.key != 'proudctName') {
          item.width = parseFloat(100 / columnsHistory.length) + '%';
        }
        if (item.key == 'lastRateProspect') {
          item.render = (text) => {
            return this.showValue(ENDOFPERIODRATEPROSPECT, text);
          };
        }
        if (item.key == 'inTime' || item.key == 'outTime') {
          item.type = 'date';
        }
      });

    return (
      <TableC
        columns={columnsHistory}
        dataSource={dataSourceHistory}
        rowKey='key'
        hidePage={true}
        scroll={dataSourceHistory && dataSourceHistory.length > 5 ? { y: 165 } : {}} //大于5行滚动
      />
    );
  };
  //展示表格
  showTableHold = () => {
    const { columnsHold, dataSourceHold } = this.state;
    columnsHold &&
      columnsHold.map((item) => {
        if (item.key != 'proudctName') {
          item.width = parseFloat(100 / columnsHold.length) + '%';
        }
      });

    return (
      <TableC
        columns={columnsHold}
        dataSource={dataSourceHold}
        rowKey='key'
        hidePage={true}
        scroll={dataSourceHold && dataSourceHold.length > 5 ? { y: 165 } : {}} //大于5行滚动
      />
    );
  };

  render() {
    const { loading, visibleModal, type } = this.props;
    const { basicInfo } = this.state;
    const modalProps = {
      visible: visibleModal,
      onOk: () => {
        this.props.triggerVisible(false);
      },
      onCancel: () => {
        this.props.triggerVisible(false); //关闭modal
      },
      title: type == 2 ? '查看历史' : '查看历史和持仓',
      className: style.historyModal,
      height: 500, //内容区域的高度
      width: 700,
    };
    return (
      <ModalC {...modalProps}>
        <Spin spinning={loading.effects[`ratingmonitoringM/queryHistory`] == true}>
          {type == 0 ? (
            <Row className={'history_basicInfo'}>
              <Col span={12}>
                <span>主体名称: {basicInfo.comName || '--'}</span>
              </Col>
              <Col span={12}>
                <span>最新评级: {basicInfo.lastRate || '--'}</span>
              </Col>
              <Col span={12}>
                <span>评级机构: {basicInfo.rateOrgan || '--'}</span>
              </Col>
            </Row>
          ) : (
            <Row className={'history_basicInfo'}>
              <Col span={12}>
                <span>债券名称: {basicInfo.bondName || '--'}</span>
              </Col>
              <Col span={12}>
                <span>公司名称: {basicInfo.comName || '--'}</span>
              </Col>
              <Col span={12}>
                <span>最新评级: {basicInfo.lastRate || '--'}</span>
              </Col>
              <Col span={12}>
                <span>最新评级机构: {basicInfo.lastRateOrgan || '--'}</span>
              </Col>
              <Col span={12}>
                <span>公司评级: {basicInfo.comRate || '--'}</span>
              </Col>
              <Col span={12}>
                <span>公司评级机构: {basicInfo.comRateOrgan || '--'}</span>
              </Col>
            </Row>
          )}
        </Spin>
        <div style={{ marginTop: '10px' }}>
          <SecondHeaderC title={type == 0 ? '历史主体评级信息' : '历史债券评级信息'} />
        </div>
        {this.showTableHistory()}
        {type != '2' ? (
          <>
            <div style={{ marginTop: '10px' }}>
              <SecondHeaderC title={'相关持仓'} />
            </div>
            {this.showTableHold()}
          </>
        ) : null}
      </ModalC>
    );
  }
}
